<template>
    <div class="header">
        <HeaderVue></HeaderVue>
    </div>
    <div class="wrap">
        <div class="bottom">
            <div class="main">
                <div class="content">
                    <div class="editor">编辑</div>
                    <div class="article">
                        <div class="article__title">
                            <span>{{ title }}</span>
                        </div>
                        <div class="create-time">{{ time }}</div>
                        <div class="article__body">
                            <v-md-preview class="preview" :text="content"></v-md-preview>
                        </div>
                    </div>
                </div>
                <div class="comments">
                    <div class="comment__input">
                        <div class="comment__input-head">评论</div>
                        <textarea ref="input_area" class="textarea" v-model="myComments" autofocus maxlength="5000"
                            placeholder="输入评论(Enter换行)"></textarea>
                        <div class="comments__send">
                            <el-button class="comments__publish" @click="publish" type="primary">发布评论</el-button>
                        </div>
                    </div>
                    <div class="comment__body">
                        <div class="comment__body-head" v-if="comments.length">全部评论</div>
                        <div class="comment__body-head" v-else>暂无评论</div>
                        <div class="comment__body-content">
                            <div class="item" v-for="item, index in comments" :key="item.date">
                                <div class="account">{{ item.accountA }}:
                                    <div class="comments-date">{{ item.formatDate }}</div>
                                </div>
                                <div class="account-comment">
                                    <div style="margin-bottom:10px">
                                        {{ item.content }}
                                        <span @click="showtextA(index)">回复</span>
                                    </div>
                                    <div style="margin-bottom:10px" v-for="(k, i) in item.reply" :key="k + i">
                                        <div class="account" style="margin-bottom:10px">
                                            {{ k.accountA }}回复{{ k.accountB }}:
                                        </div>
                                        <div>
                                            {{ k.content }}
                                            <span @click="showtextA(index)">回复</span>
                                        </div>
                                    </div>
                                    <div v-if="index == replyArea">
                                        <textarea class="textarea" ref="reply_area" v-model="myReply" maxlength="5000"
                                            :placeholder="'回复' + item.accountA"></textarea>
                                        <div>
                                            <el-button
                                                @click="reply(item.reply.length ? item.reply[index].accountA : item.accountA, item.cId)"
                                                type="primary">发布评论
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left">
                <div class="icons">
                    <div class="icon-d ">
                        <i class="iconfont icon-chakan"></i>
                        <div class="count">{{ browseCount }}</div>
                    </div>
                    <div class="icon-d hover">
                        <i class="iconfont icon-dianzan"></i>
                        <div class="count">{{ thumbCount }}</div>
                    </div>
                    <div class="icon-d hover">
                        <i class="iconfont icon-pinglun"></i>
                        <div class="count">{{ comments.length }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from '@vue/runtime-core';
import { useRoute } from 'vue-router'
import HeaderVue from '../components/Header.vue';
import { getContent, publishComments } from '../axios/index'
import { useArticleStore } from "../store/article";
import { useUserStore } from '../store/user'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const articleStore = useArticleStore()
const route = useRoute()
const replyArea = ref()
let content = ref('')
let title = ref('')
let time = ref('')
let thumbCount = ref('')
let _id: any = ref(articleStore._id)
let comments: any = ref([])
let browseCount = ref()
let myComments = ref('')
let myReply = ref('')
//获取输入区dom
let input_area = ref<Element | null>(null)
onMounted(() => {
    // 评论区输入框自适应高度
    (input_area.value as HTMLElement).addEventListener("input", function (e) {
        this.style.height = "inherit";
        this.style.height = `${this.scrollHeight + 2}px`
    })

    article(_id);
})
//根据_id获取文章
const article = (_id: any) => {
    _id = _id.value
    if (route.query._id) {
        _id = route.query._id
    }
    articleStore.setId(_id)
    getContent({ _id: _id }).then(res => {
        console.log(res);

        content.value = res.data.content
        title.value = res.data.title
        time.value = res.data.time
        thumbCount.value = res.data.thumbCount
        comments.value = res.data.comments
        browseCount.value = res.data.browseCount
    })
}
// 发表评论
const publish = () => {
    if (myComments.value.length == 0) {
        ElMessage({
            showClose: true,
            message: '评论不能为空',
            type: 'warning',
        })
        return
    }
    const params = {
        _id: articleStore._id,
        accountA: userStore.userName,
        accountB: '',
        content: myComments.value,
        date: Date.now()
    }

    publishComments(params).then(res => {
        getContent({ _id: articleStore._id }).then(res => {
            comments.value = res.data.comments
            myComments.value = ''
            console.log(res);

        })
    })
}
const showtextA = (index: number) => {
    replyArea.value = index;
}
// 回复评论
const reply = (accountA: string, cId: string) => {
    if (myReply.value.length == 0) {
        ElMessage({
            showClose: true,
            message: '评论不能为空',
            type: 'warning',
        })
        return
    }
    const params = {
        _id: articleStore._id,
        accountA: userStore.userName,
        accountB: accountA,
        content: myReply.value,
        date: Date.now(),
        cId: cId
    }

    publishComments(params).then(res => {
        getContent({ _id: articleStore._id }).then(res => {
            comments.value = res.data.comments
            myReply.value = ''
            console.log(res);
        })
    })

}
</script>

<style scoped>
.wrap {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    min-width: 1300px;
    background-color: rgb(243, 243, 243);
}

.bottom {
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

.left {
    width: 200px;
    height: 500px;
    margin-top: 50px;
    position: fixed;
    left: 130px;
}


.main {
    width: 100%;
    float: left;
}

.article {
    display: flex;
    flex-direction: column;
}

.comments {
    margin: 0 210px;
    margin-top: 10px;
    min-height: 150px;
    border: 1px solid rgb(200, 186, 186);
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 150px;
    background-color: #fff;
}

.comment__input-head,
.comment__body-head {
    margin: 15px 0 15px 5px;
    font-size: 20px;
    font-weight: 500;
}

.textarea {
    border: 1px solid rgb(79, 161, 219);
    font-size: 22px;
    line-height: 32px;
    width: 100%;
    overflow: auto;
    word-break: break-all;
    min-height: 70px;
    resize: none;
    outline: none;
    margin-bottom: 5px;
}

.comments__send {
    height: 30px;
}

.comments__publish {
    float: right;
}

.content {
    margin: 20px 210px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
}

.article__title {
    width: 100%;
    height: 30px;
    font-size: 24px;
    margin-top: 10px;
    text-align: center;
}

.article__title span {
    margin: 0 auto;
    line-height: 30px;
}

.create-time {
    margin: 0 auto;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 300;
}

.icons {
    padding-left: 150px;
    padding-top: 70px;
}

.icon-d {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    background-color: rgb(255, 255, 255);
    margin-bottom: 20px;
    position: relative;
    cursor: default;
}

.hover:hover {
    color: rgb(188, 199, 202);
    cursor: pointer;
}

.icon-d i {
    line-height: 40px;
    font-size: 24px;
}

.count {
    position: absolute;
    right: -7px;
    top: 0;
    font-size: 12px;
    color: rgb(83, 83, 83);
}

.editor {
    position: absolute;
    color: blue;
    right: 50px;
    top: 60px;
    cursor: pointer;
}

.editor:hover {
    border-bottom: 1px solid blue;
}

.comment__body-content {
    width: 100%;
}

.item {
    margin-bottom: 20px;
}

.account {
    margin-bottom: 10px;
    font-size: 18px;
    position: relative;
}

.account-comment {
    margin-left: 20px;
    margin-bottom: 30px;
    color: #666;
    font-size: 22px;
}

.account-comment span {
    font-size: 16px;
    color: blue;
    margin-left: 5px;
    vertical-align: middle;
    cursor: pointer;
}

.comments-date {
    position: absolute;
    right: 20px;
    top: 8px;
    font-size: 14px;
}
</style>